<template>
  <a-col class="gutter-row" :span="6">
    <a-card title="总访问量">
<!--      <template #extra>-->
<!--        <nuxt-link class="fz11" href="/admin/order/list"></nuxt-link>-->
<!--      </template>-->
      <div class="flex fz30 fb">
        <animated-number
            from="0"
            :to="state.logNums"
            :key="state.logNums">
        </animated-number>
      </div>
      <div class="flex mt15">
              <span class="mr10 flex align-items">周同比12%<span class="red ml5"><svg viewBox="0 0 1024 1024"
                                                                                      focusable="false"
                                                                                      data-icon="caret-up" width="1em"
                                                                                      height="1em" fill="currentColor"
                                                                                      aria-hidden="true"><path
                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
        <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024"
                                                                                  focusable="false"
                                                                                  data-icon="caret-down"
                                                                                  width="1em" height="1em"
                                                                                  fill="currentColor"
                                                                                  aria-hidden="true"><path
            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
      </div>
    </a-card>
  </a-col>
  <a-col class="gutter-row" :span="6">
    <a-card title="店铺数量">
      <div class="flex fz30 fb">
        <animated-number
            from="0"
            :to="state.shopNums"
            :key="state.shopNums">
        </animated-number>
      </div>
      <div class="flex mt15">
              <span class="mr10 flex align-items">周同比12%<span class="red ml5"><svg viewBox="0 0 1024 1024"
                                                                                      focusable="false"
                                                                                      data-icon="caret-up" width="1em"
                                                                                      height="1em" fill="currentColor"
                                                                                      aria-hidden="true"><path
                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
        <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024"
                                                                                  focusable="false"
                                                                                  data-icon="caret-down"
                                                                                  width="1em" height="1em"
                                                                                  fill="currentColor"
                                                                                  aria-hidden="true"><path
            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
      </div>
    </a-card>
  </a-col>
  <a-col class="gutter-row" :span="6">
    <a-card title="商品数量">
      <div class="flex fz30 fb">
        <animated-number
            from="0"
            :to="state.goodsNums"
            :key="state.goodsNums">
        </animated-number>
      </div>
      <div class="flex mt15">
              <span class="mr10 flex align-items">周同比12%<span class="red ml5"><svg viewBox="0 0 1024 1024"
                                                                                      focusable="false"
                                                                                      data-icon="caret-up" width="1em"
                                                                                      height="1em" fill="currentColor"
                                                                                      aria-hidden="true"><path
                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
        <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024"
                                                                                  focusable="false"
                                                                                  data-icon="caret-down"
                                                                                  width="1em" height="1em"
                                                                                  fill="currentColor"
                                                                                  aria-hidden="true"><path
            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
      </div>
    </a-card>
  </a-col>
  <a-col class="gutter-row" :span="6">
    <a-card title="订单统计">
      <div class="flex fz30 fb">￥
        <animated-number
            from="0"
            :to="state.orderPrice"
            :key="state.orderPrice">
        </animated-number>
      </div>
      <div class="flex mt15">
              <span class="mr10 flex align-items">总金额：{{state.orderNums}}<span class="red ml5"><svg viewBox="0 0 1024 1024"
                                                                                      focusable="false"
                                                                                      data-icon="caret-up" width="1em"
                                                                                      height="1em" fill="currentColor"
                                                                                      aria-hidden="true"><path
                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
        <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024"
                                                                                  focusable="false"
                                                                                  data-icon="caret-down"
                                                                                  width="1em" height="1em"
                                                                                  fill="currentColor"
                                                                                  aria-hidden="true"><path
            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
      </div>
    </a-card>
  </a-col>
</template>
<script setup>
const state = ref({
  goodsNums: 0,
  logNums: 0,
  orderNums: 0,
  orderPrice: 0,
  shopNums: 0,
})
const handleLoadData = async () => {
  const resp = await useStateCardApi();
  state.value = resp.data
}

onMounted(() => {
  handleLoadData()
})
</script>

<style scoped>

</style>